<template>
  <view class="normal-login-container">
    <view class="logo-content">
      <image class="login-bg" src="/static/images/common/login-b.png"></image>
    </view>

    <view class="page-content">
      <image class="plate-title" src="/static/images/common/login-bg-title.png" mode="widthFix"></image>
      <view class="title-name">
        <view class="line-de left"></view>能源局端<view class="line-de right"></view>
      </view>
      <view class="login-form-content">
        <view class="input-item flex align-center">
          <view class="icon-box">
            <image src="@/static/images/common/name.png"></image>
          </view>
          <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
        </view>
        <view class="input-item flex align-center">
          <view class="icon-box">
            <image src="@/static/images/common/pwd.png"></image>
          </view>
          <input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="30"
            :password="showAgainPwd" />
          <image class="eye-icon" @click="toggleShowAgainPwd" :src="!showAgainPwd ? closeEye : openEye" />
        </view>
        <view class="input-item flex align-center">
          <view class="icon-box">
            <image src="@/static/images/common/code.png"></image>
          </view>
          <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="6" />
          <view class="send_code"><img :src="codeUrl" @click="sendCode" class="login-code-img" /></view>
        </view>
        <view class="action-btn">
          <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
        </view>
        <view class="mess-box">【有密必保，保密必慎，泄密必究】</view>
        <!-- <view class="xieyi text-center">
          <view class="read-box" @click="handlePrivacy">
            <image v-if="privacycheck" src="@/static/images/common/uncheck.png">
              <image v-else src="@/static/images/common/checked.png"></image>
          </view>
          <text class="tip">我已阅读并同意</text>
          <text @click="handleUserAgrement" class="text-link">《用户协议》</text>
          <text @click="handlePrivacys" class="text-link">《隐私协议》</text>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
  import { sendCode, getCodeImg } from '@/api/login'
  import config from '@/config';
  export default {
    data() {
      return {
        globalConfig: getApp().globalData.config,
        sendCodeText: '获取验证码',
        count: 60,
        privacycheck: false,
        codeUrl: "",
        showAgainPwd: true,
        loginForm: {
          username: "",
          password: "",
          code: "",
          uuid: "",
        },
      }
    },
    computed: {
      openEye() {
        return config.baseImgUrl + '/eye.png';
      },
      closeEye() {
        return config.baseImgUrl + '/noeye.png';
      }
    },
    created() {
      this.getCode()
    },
    onShow() {
      // 微信小程序方式
      uni.hideTabBar();

      // 或者使用条件编译
      // #ifdef MP-WEIXIN
      uni.hideTabBar();
      // #endif
    },
    methods: {
      handlePrivacy() {
        this.privacycheck = !this.privacycheck
      },
      getCode() {
        this.$store.dispatch('GetCode').then(res => {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        })
      },
      // 隐私协议
      handlePrivacys() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 发送验证码
      sendCode() {
        getCodeImg().then((res) => {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        });
      },
      // 登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入密码")
        } else if (this.loginForm.code === "") {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.codeLogin()
        }
      },
      toggleShowAgainPwd() {
        this.showAgainPwd = !this.showAgainPwd;
      },
      // 密码登录
      async codeLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch((err) => {
          this.sendCode()
        })
        // this.$store.dispatch('Login', {username:'admin',password:'Nyj$810.',code:this.code}).then(() => {
        // 	this.$modal.closeLoading()
        // 	this.loginSuccess()
        // }).catch((err) => {
        // 	console.log(err)
        // })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/home/index')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mess-box {
    color: #D22C2C;
    padding-bottom: 30rpx;
  }

  .eye-icon {
    width: 40rpx;
    height: 40rpx;
  }

  .normal-login-container {
    width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;

    .logo-content {
      width: 100%;
      position: absolute;

      .login-bg {
        width: 100%;
        height: 100vh;
      }
    }

    .login-code-img {
      height: 44px;
      width: 100%;
      position: relative;
      top: 9px;
      right: -10px;
    }

    .page-content {
      width: 750rpx;
      z-index: 999;
      margin: auto;
      text-align: center;

      .plate-title {
        width: 96%;
        margin-bottom: 30rpx;
      }

      .title-name {
        font-size: 40rpx;
        color: #fff;
        margin-bottom: 30rpx;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
      }

      .line-de {
        height: 1rpx;
        width: 40rpx;
        background-color: #fff;
      }

      .line-de.left {
        margin-right: 10rpx;
      }

      .line-de.right {
        margin-left: 10rpx;
      }
    }

    .login-form-content {
      width: 690rpx;
      margin: 0 auto;
      overflow: hidden;
      background-color: #FFF;
      border-radius: 10rpx;
      padding: 0 25rpx;

      .input-item {
        height: 96rpx;

        .icon-box {
          uni-image {
            width: 48rpx !important;
            height: 58rpx !important;
            top: 8rpx;
          }
        }

        .icon {
          font-size: 38rpx;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 28rpx;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
          position: relative;
          top: 6rpx;
        }

        .send_code {
          color: #FF8B15;
          flex-shrink: 0;
          margin-right: 10px;
          line-height: 45px;
        }
      }

      .input-item:not(:last-child) {
        border-bottom: 1rpx solid #eee;
      }

    }

    .action-btn {
      margin: 50rpx auto;

      .login-btn {
        height: 98rpx;
        background-color: #D22C2C !important;
        border-radius: 10rpx !important;
        color: #FFFFFF;
        font-weight: bold;
      }
    }

    .xieyi {
      font-weight: bold;
      margin-top: 20rpx;
      padding-bottom: 40rpx;
      display: flex;
      align-items: center;

      .read-box {
        width: 32rpx !important;
        height: 32rpx !important;
        margin-right: 10rpx;

        uni-image {
          width: 32rpx !important;
          height: 32rpx !important;
        }
      }

      .tip {
        color: #424242;
      }

      .text-link {
        color: #D22C2C;
      }
    }
  }
</style>